<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<title>栅格系统</title>
	
	<link rel="stylesheet"  href="__ROOT__/static/css/bootstrap.min.css" />
	<style>
.a{
height:50px;
width:200px;
border:1px solid #ccc;
background-color:#eee;

}

.b{
height:50px;
border:1px solid #ccc;
background-color:red;

}
	</style>
	
	</head>
<body >

<div class="container">

<div class="jumbotron"> 
<h2>网站标题</h2>
 <p>这是一个学习性的网站！</p>

<p><a href="#" class="btn btn-default">更多内容</a></p> </div>

</div>
<br/><br/>
<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">100%全屏，没有圆角,是常用用法 </p>

<div class="jumbotron"> <div class="container">

<h2>网站标题</h2> <p>这是一个学习性的网站！</p>
<p><a href="#" class="btn btn-default">更多内容</a></p> </div>

</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">页头组件 </p>
<div class="page-header">

<h1>大标题 <small>小标题</small></h1> </div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">缩略图组件 </p>

<div class="container">
<div class="row">

<div class="col-xs-6 col-md-3 col-sm-4"> <div class="thumbnail">

<img src="__ROOT__/static/note/img/7.jpg" alt=""> </div>

</div>

<div class="col-xs-6 col-md-3 col-sm-4"> <div class="thumbnail">

<img src="__ROOT__/static/note/img/7.jpg" alt=""> </div>

</div>

<div class="col-xs-6 col-md-3 col-sm-4"> <div class="thumbnail">

<img src="__ROOT__/static/note/img/7.jpg" alt=""> </div>

</div>

<div class="col-xs-6 col-md-3 col-sm-4"> <div class="thumbnail">

<img src="__ROOT__/static/note/img/7.jpg" alt=""> </div>

</div>

</div>

</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">缩略图组件2 </p>
<div class="container"> <div class="row">

<div class="col-xs-6 col-md-3 col-sm-4"> <div class="thumbnail">

<img src="__ROOT__/static/note/img/7.jpg" alt=""> <div class="caption">

<h3>图文并茂</h3> <p>这是一个图片结合文字的缩略图</p> <p><a href="#" class="btn btn-default">进入</a></p>

</div>

</div>

</div>

<div class="col-xs-6 col-md-3 col-sm-4"> <div class="thumbnail">

<img src="__ROOT__/static/note/img/7.jpg" alt=""> <div class="caption">

<h3>图文并茂</h3> <p>这是一个图片结合文字的缩略图</p> <p><a href="#" class="btn btn-default">进入</a></p>


</div>

</div>

</div>

<div class="col-xs-6 col-md-3 col-sm-4">

<div class="thumbnail">

<img src="__ROOT__/static/note/img/7.jpg" alt="">

<div class="caption"> <h3>图文并茂</h3> <p>这是一个图片结合文字的缩略图</p>

<p><a href="#" class="btn btn-default">进入</a></p> </div>

</div>

</div>

<div class="col-xs-6 col-md-3 col-sm-4"> <div class="thumbnail">

<img src="__ROOT__/static/note/img/7.jpg" alt=""> <div class="caption">

<h3>图文并茂</h3> <p>这是一个图片结合文字的缩略图</p> <p><a href="#" class="btn btn-default">进入</a></p>

</div>

</div>

</div>

</div>

</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">警告 </p>

<div class="alert alert-success">Bootstrap</div> <div class="alert alert-info">Bootstrap</div> <div class="alert alert-warning">Bootstrap</div> <div class="alert alert-danger">Bootstrap</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">带关闭按钮的警告 data-dismiss="alert" 关闭 </p>

<div class="alert alert-success"> Bootstrap

<button type="button" class="close" data-dismiss="alert"> <span>&times;</span>

</button>

</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">带关闭按钮的警告 加超链接 </p>

<div class="alert alert-success">

Bootstrap，请到官网 <a href="#" class="alert-link">下载</a> </div>












<script src="__ROOT__/static/js/jquery.min.js"></script>
<script src="__ROOT__/static/js/bootstrap.min.js"></script>


</body>
</html>